<template>
  <el-drawer
    v-model="visibility"
    title="分配权限"
    append-to-body
    class="assign_drawer">
    <el-tree
      ref="treeRef"
      :data="permissionList"
      show-checkbox
      :default-checked-keys="JSON.parse(props.rowData.roleJson)"
      node-key="path" />
    <template #footer>
      <div>
        <el-button @click="visibility = false">{{ config.button.text.close }}</el-button>
        <el-button
          type="primary"
          @click="saveEvent">
          {{ config.button.text.save }}
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref } from "vue";
import ApiSysRole from "@/api/modules/sys-role"
import { useRouters } from "@/hooks/useRouter"
const { permissionList } = useRouters()
import config from "@/common/element-plus/config";

const treeRef = ref()
const visibility = ref(false)

const props = defineProps(["rowData"])

const emits = defineEmits(["save"])

const saveEvent = async () => {
  const data = treeRef.value.getCheckedNodes(true).map(item => item.path)
  await ApiSysRole.update({ ...props.rowData, roleJson: JSON.stringify(data) })
  emits("save")
}

defineExpose({ visibility })
</script>

<style lang="scss">
/* 屏幕宽度小于 800px */
@media (max-width: 800px) {
  .assign_drawer {
    width: 200px !important;
  }
}
</style>